<template>
  <div class="publish">
    <NSpin :show="loading">
      <cldPostForm v-model:value="postDetails"></cldPostForm>
    </NSpin>
    <div class="action">
      <span class="pub ab" @click="handleEditPost(1)">发布</span>
      <span class="save ab" @click="handleEditPost(2)">保存草稿</span>
      <span class="save ab" @click="goBackList">返回列表</span>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { onMounted, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { NSpin } from "naive-ui";
import { fetchGetPostDetails, fetchPostUpdate } from "~/api/post";
import { IPostDetails } from "~/api/post/types";
import cldPostForm from "~/components/cld-post-form/index.vue";
const route = useRoute();
const router = useRouter();
const loading = ref<boolean>(true);
const postDetails = ref<IPostDetails>({
  post_id: "",
  author_id: "",
  community_id: "",
  cover: "",
  status: 1,
  title: "",
  description: "",
  content: "",
  create_time: "",
  update_time: "",
  community: {
    community_id: "",
    community_name: "",
    introduction: "",
    create_time: "",
    update_time: "",
  },
});
const handleEditPost = (type: number) => {
  postDetails.value.status = type;
  fetchPostUpdate(postDetails.value).then((r) => {
    if (r.code === 1000) {
      window.NMessage.success(type === 1 ? "发布成功" : "保存成功");
    }
  });
};
const handleGetPostDetails = () => {
  loading.value = true;
  fetchGetPostDetails(route.params.post_id as string)
    .then((r) => {
      postDetails.value = r.result;
    })
    .finally(() => {
      loading.value = false;
    });
};
const goBackList = () => {
  router.go(-1);
};
onMounted(() => {
  handleGetPostDetails();
});
</script>
<style lang="scss" scoped>
.publish {
  .action {
    display: flex;
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    .ab {
      padding: 5px;
      margin: 10px;
      border-radius: 5px;
      box-shadow: 1px 1px 1px #000;
    }
    .pub {
      background-color: greenyellow;
    }
    .save {
      background-color: rgb(85, 117, 244);
      color: #fff;
    }
  }
}
</style>
